<style scoped>
.layui-row {
  overflow: hidden;
}
.select-item {
  width: 34.333333%;
  float: right;
}
.layui-row:after, .layui-row:before {
  clear: none;
}
</style>
<template>
  <div class="department">

    <form class="layui-form "  >
      <div class="layui-form-item">
        <label class="layui-form-label">源用户</label>
        <div class="layui-input-block" style="z-index: 10000;width: 200px">
          <input type="text" name=""   placeholder="请输入客户名称" value="" id="usertransfer" class="layui-input" style="position:absolute;width:80%;" lay-verify="required"  onkeyup="search()" autocomplete="off">
          <select type="text" name="fromuser"    id="hc_select" lay-filter="hc_select" autocomplete="off"    class="layui-select" lay-search>
            <option value="">请输入用户名称</option>
          </select>
        </div>
      </div>
      <div class="layui-input-block" style="  position: absolute;left: 450px;top: 70px;">
        <button class="layui-btn" lay-submit lay-filter="submit">➜ 交接 ➜</button>
      </div>
      <div class="layui-form-item" style="position:absolute;left:700px;top:70px">
        <label class="layui-form-label">目标用户</label>
        <div class="layui-input-block" style="z-index: 10000;width: 200px">
          <input type="text" name=""   placeholder="请输入客户名称" value="" id="user" class="layui-input" style="position:absolute;width:80%;" lay-verify="required"  onkeyup="search()" autocomplete="off">
          <select type="text" name="touser"    id="hc_select2" lay-filter="hc_select2" autocomplete="off"   class="layui-select" lay-search>
            <option value="">请输入用户名称</option>
          </select>
        </div>
      </div>



    </form>

    <div style="height: 200px"></div>
  </div>
</template>

<script>
export default {
  name: 'Usertransfer',
  data () {
    return {
      departments: [],
      searchName: '',
      afterList: [],
      srguid:'',
      departmentid:'',
      permissiondefid:''
    }
  },
  mounted() {
    let that = this;
    layui.use(['form'], function () {
      var form = layui.form,
        layer = layui.layer;
      that.loadUser()
    });
    layui.use(['form', 'layedit','upload'], function () {
      var form = layui.form
      form.on('select(hc_select)', function (data) {   //选择移交单位 赋值给input框
        $("#usertransfer").val(data.value);
        $("#hc_select").next().find("dl").css({ "display": "none" });
        form.render();
      });
      window.search = function () {
        var value = $("#usertransfer").val();
        $("#hc_select").val(value);
        form.render();
        $("#hc_select").next().find("dl").css({ "display": "block" });
        var dl = $("#hc_select").next().find("dl").children();
        var j = -1;
        for (var i = 0; i < dl.length; i++) {
          if (dl[i].innerHTML.indexOf(value) <= -1) {
            dl[i].style.display = "none";
            j++;
          }
          if (j == dl.length-1) {
            $("#hc_select").next().find("dl").css({ "display": "none" });
          }
        }

      }
    });

    layui.use(['form', 'layedit','upload'], function () {
      var form = layui.form
      form.on('select(hc_select2)', function (data) {   //选择移交单位 赋值给input框
        $("#user").val(data.value);
        $("#hc_select2").next().find("dl").css({ "display": "none" });
        form.render();
      });

      window.search = function () {
        var value = $("#user").val();
        $("#hc_select2").val(value);
        form.render();
        $("#hc_select2").next().find("dl").css({ "display": "block" });
        var dl = $("#hc_select2").next().find("dl").children();
        var j = -1;
        for (var i = 0; i < dl.length; i++) {
          if (dl[i].innerHTML.indexOf(value) <= -1) {
            dl[i].style.display = "none";
            j++;
          }
          if (j == dl.length-1) {
            $("#hc_select2").next().find("dl").css({ "display": "none" });
          }
        }

      }
    });


    layui.use(['form'], function () {
      var form = layui.form, layer = layui.layer;
      form.render();
      form.on('submit(submit)', function (data) {
        let loader = layer.load();
        $.ajax({
          url: '/sales/Sellform!usertransfer.action',
          data: data.field,
          type: "post",
          dataType: "json",
          success: function(res) {
            if (res.info == "ok") {
              that.toast("交接成功");
              that.$parent.switchPage('Usertransfer');
            } else if(res.info == "user is null"){
              that.toast("请选择源用户/目标用户");
            }else {
              that.toast("系统错误");
            }
          },
          complete: function () {
            layer.close(loader);
          }
        });
        return false;
      });
    });

  },
  methods: {
    // 数据转换
    tansList () {
      this.afterList = Object.values(this.departments.reduce((temp, item) => {
        if( temp[item.telphone] ) {
          temp[item.telphone].push(item)
        }else {
          temp[item.telphone]  = [item]
        }
        return temp
      },{}))
    },
    add: function () {
      this.$parent.switchPage('addSalesPermission');
    },
    del: function (id,type) {
      let that = this;
      var user =  $("#user").val();
      var usertransfer = $("#usertransfer").val();
      if(user == '' ||user ==null){
        that.toast("请选择目标用户");
        return  false;
      }
      let loader = layer.load();
      $.ajax({
        url: '/permission/salespermission/usertransfer',
        type: "post",
        data: {permissionGuid: id, transferType: type, user: user, usertransfer: usertransfer},
        dataType: "json",
        success: function(res) {
          if (res.info == "ok") {
            that.toast("操作成功");

          } else {
            that.toast("系统错误");
          }
        },
        complete: function () {
          layer.close(loader);
        }
      });

    },
    //加载用户权限信息
    loadUser:  function (){
      $.ajax({
        url: '/permission/salespermission/findSalseUser',
        type: "post",
        dataType: "json",
        success: function(res) {
          if (res != undefined && res.info != undefined) {
            var data = res.info;
            $.each(data.users, function (index, item) {
              $('#hc_select').append(new Option(item.realname + "(" + item.telphone + ")", item.guid));
            });
            $.each(data.users, function (index, item) {
              $('#hc_select2').append(new Option(item.realname + "(" + item.telphone + ")", item.guid));
            });
            layui.form.render("select");
          } else {
            alert("系统错误");
          }
        }
      });
    }

  }
}
</script>
